@extends('template.index')
@section('main')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1></h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/">首页</a></li>
                        <li class="breadcrumb-item active">销售管理表</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">销售明细</h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>订单日期</th>
                                <th>收货人</th>
                                <th>发货人</th>
                                <th>樱桃品种</th>
                                <th>樱桃重量(kg)</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
@endsection
@section('footscript')
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap4.js"></script>
    <script>
        var table = new Object();
        var searchParams = new Object();
        $(function () {
            searchParams.searchName = '';
            createTables();
            //
            // table.destroy();
            //
            // searchParams = {'cnm':'fucking', 'endTime':'12312312312'};
            //
            // createTables();
        });

        $("body").on("click", "#searchTable", function () {
            var content = $('#searchContent').val();
            searchParams.searchName = content;
            table.destroy();
            createTables();
        });

        $("body").on("click", "#view", function (e) {
            console.log(e);
            var id = e.currentTarget.dataset.id;
            window.open('add?id=' + id);
        });

        $("body").on("click", "#add", function () {
            window.open('add');
        });

        function createTables() {
            table = $("#example1").DataTable({
                "processing" : true,
                "paging": true,
                "info": false,
                "autoWidth": false,
                "scrollX": true,
                "searching": false,
                "serverSide": true,
                "ordering": true,
                "ajax" : {
                    "url" : 'tableJson',
                    "type": 'GET',
                    "data": function (d) {
                        //删除多余请求参数
                        for(var key in d){
                            if(key.indexOf("columns")===0||key.indexOf("search")===0){ //以columns开头的参数删除 key.indexOf("order")===0
                                delete d[key];
                            }
                        }
                        //附加查询参数
                        if(searchParams){
                            $.extend(d,searchParams); //给d扩展参数
                        }
                    }
                },
                "language": {//插件的汉化
                    "lengthMenu": "每页 _MENU_ 条数据",
                    "info": "_START_ 到 _END_ /共 _TOTAL_ 条数据",
                    "infoEmpty": "没有数据",
                    "infoFiltered": "(从 _MAX_ 条数据中检索)",
                    "paginate": {
                        "first": "首页",
                        "previous": "前一页",
                        "next": "后一页",
                        "last": "尾页"
                    },
                    "zeroRecords": "没有检索到数据",
                    // "sProcessing": "<img src='/static/images/loadd.gif' />",
                    "processing" : "数据读取中",
                    "search": "搜索"
                },
                "initComplete": function () {
                    var cardBody = $('.card-body');
                    cardBody.find(".col-md-6").eq(1).append('<div class="input-group">\n' +
                        '                  <input id="searchContent" value="' + searchParams.searchName + '" type="text" class="form-control" placeholder="发货人、收货人">\n' +
                        '\n' +
                        '                  <div class="btn-group">\n' +
                        '                    <button id="searchTable" type="button" class="btn btn-primary btn-flat">搜索</button>\n' +
                        '                    <button id="add" type="button" class="btn btn-flat btn-danger">新增</button>\n'+
                        '                  </div>\n' +
                        '                </div>');

                },
                "columnDefs": [
                    {
                        "targets": -1,
                        "data": null,
                        "orderable": false,
                        "render": function (data, type, row, meta) {
                            return '<button type="button" class="btn btn-block btn-success" data-id="' + data + '" id="view">查看</button>';
                        },
                        "sWidth": "10%"
                    }
                ],
                "columns": [
                    {'data' : 'commit_time', 'orderable' : true},
                    {'data' : 'receiver', 'orderable' : false},
                    {'data' : 'sender', 'orderable' : false},
                    {'data' : 'cherry_class', 'orderable' : false},
                    {'data' : 'cherry_weight', 'orderable' : false},
                    {'data' : 'id'}
                ],
                "order": [
                    [0, 'desc']
                ]
            });
        }
    </script>
@endsection